<template>
    <div class="grid">
        <div class="left">
            <h1>MY blog</h1>
            <router-link to="/BlogHome" class="btn">博客</router-link>
        </div>
        <div class="right">
            <h1>Ten years of life and death</h1>
            <router-link to="/TenYearOf" class="btn">十年生死</router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Choice',
    mounted() {
        const left = document.querySelector('.left')
        const right = document.querySelector('.right')
        const grid = document.querySelector('.grid')

        left.addEventListener('mouseenter', () => grid.classList.add('hover-left'))
        left.addEventListener('mouseleave', () => grid.classList.remove('hover-left'))

        right.addEventListener('mouseenter', () => grid.classList.add('hover-right'))
        right.addEventListener('mouseleave', () => grid.classList.remove('hover-right'))
    },

}
</script>

<style lang="less" scoped>
@import url('../../../public/font/font.css');

@VH: 100vh;
@_5VW: 50vw;
@hover-width: 145%;
@other-width: 55%;

.grid {
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    background-color: black;
    overflow: hidden;

    .left {
        h1 {
            font-family: 'facno';
            color: black;
        }

        .btn {
            font-family: 'QNHGXK';
            font-size: 25px;
            color: #000;
            border: #000 solid 0.2rem;
        }
    }

    .right {
        h1 {
            font-family: 'facno';
            font-size: 40px;
            color: #fff;
        }

        .btn {
            font-size: 25px;
            font-family: 'QNHGXK';
            color: #fff;
            border: #fff solid 0.2rem;
        }
    }

    div {
        height: @VH;
        width: @_5VW;
        box-sizing: border-box;
        display: flex;
        justify-items: center;
        align-items: center;
        position: relative;
        transition: all 1s linear;

        h1 {
            font-size: 4rem;
            position: absolute;
            left: 50%;
            top: 20%;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .btn {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            left: 50%;
            top: 40%;
            transform: translateX(-50%);
            text-decoration: none;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            width: 15rem;
            padding: 1.5rem;
        }
    }

    div:nth-of-type(1) {
        animation: bottomToUp linear 1 1s;
    }

    div:nth-of-type(1)::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background-image: url(./images/left-image.jpg);
        background-size: cover;
    }

    div:nth-of-type(2)::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background-image: url(./images/right-image.jpg);
        background-size: cover;
    }

    div:nth-of-type(2) {
        animation: upToBottom linear 1 1s;
    }

    @keyframes upToBottom {
        from {
            transform: translate(0, @VH);
        }

        to {
            transform: translate(0, 0);
        }
    }

    @keyframes bottomToUp {
        from {
            transform: translate(0, -@VH);
        }

        to {
            transform: translate(0, 0);
        }
    }
}

.hover-left {
    .left {
        width: @hover-width;
    }

    .right {
        width: @other-width ;
    }
}

.hover-right {
    .left {
        width: @other-width;
    }

    .right {
        width: @hover-width ;
    }
}
</style>